<template>
    <div>
        <van-overlay :show="videoshow" @click="videoshow = false">
            <div class="wrapper">
                <div @click.stop class="warpVideo">
                    <video-player  class="video-player vjs-custom-skin"
                    ref="videoPlayer" 
                    :playsinline="true" 
                    :options="playerOptions"
                    @playing="onPlayerPlaying($event)"
                    @pause="playerPause"
                    >
                
                 
            </video-player>
            </div>
            </div>
            </van-overlay>
        <!-- <div class="videos" @click="changeVideos">
            <div class="waterpost">
                艾克瑞特于海洋
            </div> -->
            <video-player  class="video-player vjs-custom-skin"
            ref="videoPlayer" 
            :playsinline="true" 
            :options="playerOptions"
            @playing="onPlayerPlaying($event)"
            @pause="playerPause"
            >
            </video-player>
        <!-- </div> -->
       
        <!-- <video preload='auto' id='my-video' src='http://niu.icrobot.cn/3e83b064d97747838705df26168d05b62-000-005点名答到.mp4' webkit-playsinline='true' playsinline='true' x-webkit-airplay='true'  controls="controls" x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true' width='100%'><p style="z-index:1000000000"> 不支持video</p> </video> -->
        <!-- 标题 -->
        <div class="timess">
            视频学习总时长剩余
            <van-count-down @change="timeChange"  ref="countDown" :auto-start="false" :time="time">
                <template #default="timeData">
                   {{ timeData.hours }}:{{ timeData.minutes }}:{{ timeData.seconds }}
                </template>
            </van-count-down>
        </div>
        <div class="title">
            <div class="top">{{title}}</div>
            <div class="bottom">
                <div style="opacity:0;" class="left"><img src="img/shangchuanzhe@2x.png" alt="">
                <span>上传者：{{sendName}}</span>
                </div>
                <img @click="submitTo" class="img" src="img/shangchuanshipin.png" alt="">
            </div>
        </div>
        <!-- tabs -->
        <van-tabs v-model="active" @change="onChange" title-active-color="#2A9CFF" animated>
            <van-tab title="标准视频">
                <ul>
                    <li v-for="(data,index) in standVideo" @click="standVideoSelect(data.videoFile,data.videoName)" :class="url == data.videoFile ? 'active' : ''" :key="index">
                        <h3>{{data.videoName}}</h3>
                        <div class="time">
                            <!-- <img src="img/shipinbofangqi.png" alt=""><span>{{data.videoTime | getTime}}</span> -->
                             
                            </div>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="优秀精彩视频">
                <ul>
                    <li v-for="(data,index) in goodVideo" @click="goodVideoSelect(index,data.videoFile,data.submitUsername,data.videoName)" :key="index">
                        <h3 :style="{color:goodVidexIndex == index ? '#2A9CFF':''}">{{index+1 + '-优秀精彩视频-' + $route.query.name}}</h3>
                        <div class="times">
                            <div class="left">
                                <!-- <img src="img/shipinbofangqi.png" alt=""><span>00：00：{{data.videoTime}}</span> -->
                            </div>
                            <div class="right">
                               <span> {{data.submitUsername}}</span>上传
                            </div>
                        </div>
                    </li>
                </ul>
                <div v-if="!goodVideo.length" class="emply">
                    <img src="img/rr@2x.png" alt="">
                    <span>暂无视频</span>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    mounted() {
        this.activeIndex = 0;
        this.id = this.$route.query.id;
        this.courseId = this.$route.query.lessonId;
        this.url = this.$route.query.url;
        this.playerOptions.sources[0].src = this.$route.query.url;
    
        (
            async()=>{
                const {data} = await this.get('/course/selectClassNameAndClassPartName',{partId:this.id});
                const video = await this.get('/course/selectBiaoZhunVideo',{partId:this.id})
                const goodVideo = await this.get('/course/selectJingCaiVideo',{classpartId:this.id});
                // setTimeout(async () => {
                    const time = await this.get('/course/queryClassAllotsOne',{courseId:this.courseId,userId:localStorage.getItem('id')});
                    this.oldTime = parseInt(time.data.videoTime);
                    
                    this.time =parseInt(this.oldTime*(1 - time.data.videoProgress/100))*1000;
                    // this.time =(this.oldTime - parseInt(this.oldTime * time.data.videoProgress))*1000;
                    console.log(this.oldTime,this.time);
                    this.goodVideo = goodVideo.data;
                    console.log(goodVideo);
                    this.name = data.className + '-' + data.courseName + '-' + data.partName;
                    let obj = video.data.filter(item=>item.videoFile == this.url)[0];
                    this.title = obj.videoName;
                    this.standVideo = video.data;
                    // this.loading = false;
                // }, 300);
                
            }
        )()
    },
    destroyed(){
        // return
        if(this.switchs){
            return
        }
        // if(this.loading){
        //     return
        // }
        if(this.oldTime == null || this.oldTime == 0){
            (async ()=>{
                let data = await this.get('/course/updateIcrobotUserClassProgress',{courseId:this.courseId,userId:localStorage.getItem('id'),videoProgress:100})
            })()
            return
        };
        let videoProgress = ((1 - (this.newTime / this.oldTime)).toFixed(4))*100;
        console.log(videoProgress);
        (async ()=>{
            let data = await this.get('/course/updateIcrobotUserClassProgress',{courseId:this.courseId,userId:localStorage.getItem('id'),videoProgress})
        })()
    },
    data() {
        return {
            id:'',
            courseId:'',
            active:'',
            name:'',
            url:'',
            title:'',
            videoshow:false,
            loading:true,
            sendName:'暂无',
            goodVidexIndex:-1,
            activeIndex:-1,
            standVideo:[],
            oldTime:0,
            newTime:0,
            time:0,
            timeData:{
                hours:0,
                minutes:0,
                seconds:0
            },
            switchs:true,
            goodVideo:[],
            playerOptions : {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "" //url地址
                }],
                poster: "img/bofangshipin.png", //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
                }
            }
        }
    },
    methods: {
        changeVideos(){
            this.videoshow = true;
            // let div = document.querySelector('.videos');
            // div.style.transform = 'rotate('+90+'deg)';
            // div.style.position = 'fixed';
            // div.style.left = '-5.8' + 'rem';
            // div.style.right = '-0.3'+ 'rem';
            // div.style.bottom = 0+'rem';
            // div.style.top = 0+'rem';
        },
        onPlayerPlaying(){
            this.$refs.countDown.start();
        },
        playerPause(){
            this.$refs.countDown.pause();
        },
          timeChange(e){
              this.switchs = false;
           this.newTime = this.changeTime(e.hours,e.minutes,e.seconds);
        },
        changeTime(hour,minutes,seconds){
            return (hour*60*60 + minutes*60 + seconds);
        },
        onChange(e){
            this.activeIndex = e;
        //    this.$refs.countDown.pause();
            if(e == 0){
                // this.playerOptions.sources[0].src = this.standVideo[0].videoFile;
                this.title = this.standVideo[0].videoName;
            }else {
                //  this.playerOptions.sources[0].src = this.goodVideo[0].videoFile;
                   this.title =  this.goodVideo[0].videoName;
                 this.sendName = this.goodVideo[0].submitUsername;
            }
        },
        standVideoSelect(url,title){
            this.$refs.countDown.pause();
            this.url = url;
            this.title = title;
            this.playerOptions.sources[0].src = url;
            
        },
        goodVideoSelect(index,url,name,title){
            this.$refs.countDown.pause();
            this.goodVidexIndex = index;
            this.playerOptions.sources[0].src = url;
            this.title = title;
            this.sendName = name;
        },
        submitTo(){
            this.$router.push({
                path:'/approver',
                query:{
                    title:this.name,
                    lessonId:this.$route.query.lessonId,
                    partId:this.$route.query.id
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
/deep/ .van-overlay{
    z-index: 100000;
}
.wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotate(90deg);
    .warpVideo{
        position: fixed;
        left: -2.8rem;
        right: -2.8rem;
        top: 2.96rem;
        bottom: 0;
    }
}
.videos{
    z-index: 1000;
    position: relative;
    // top: 0;
    // left: 0;
    // bottom: 0;
    // right: 0;
    .waterpost{
        position: fixed;
        top: 0.2rem;
        font-size: 20px;
        z-index: 1000;
    }
}
p{
    position: absolute;
    top: 0;
    background: pink;
    z-index: 100000000000000;
}
.emply{
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    img{
        width: 1.66rem;
        height: 1.7rem;
        vertical-align: middle;
    }
    span{
        margin-top: 0.2rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #C6C6C6;
    }
}
/deep/ .van-tabs__line{
    background-color: #2A9CFF !important;
}   
        .active{
            h3{
                color: #2A9CFF !important;
            }
        }
    .timess{
        padding: 0.15rem 0.2rem;
        box-sizing: border-box;
        font-size: 0.24rem;
        color: #343434;
        background: #91d7ff;
        display: flex;
        align-items: center;
    }
   .title{
       padding: 0.24rem;
       box-sizing: border-box;
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #343434;
        border-bottom: 0.1rem solid #F7F9FA;
        .top{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .bottom{
            margin-top: 0.3rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                span{
                    margin-left: 0.1rem;
                    font-size: 0.24rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #2E9EFF;
                }
                img{
                    width: 0.21rem;
                    height: 0.26rem;
                }
            }
            .img{
                width: 0.38rem;
                height: 0.34rem;
            }
        }
   }
   ul{
       padding: 0 0.25rem;
       box-sizing: border-box;
    //    border-top: 0.01rem solid #E7E7E7;
       li{
           padding: 0.3rem 0;
           box-sizing: border-box;
           border-bottom: 0.01rem solid #E7E7E7;
           h3{
              
                font-size: 0.3rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #343434;
           }
           .time{
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #9C9C9C;
                display: flex;
                align-items: center;
                margin-top: 0.23rem;
                img{
                    width: 0.22rem;
                    height: 0.22rem;
                }
                span{
                    margin-left: 0.23rem;
                }
           }
           .times{
               display: flex;
                font-size: 0.24rem;
               align-items: center;
               justify-content: space-between;
                color: #9C9C9C;
                margin-top: 0.23rem;
                .left{
                    display: flex;
                    align-items: center;
                }
                .right{
                    span{
                        color: #2E9EFF;
                        margin-right: 0.2rem;
                    }
                }
                 img{
                    width: 0.22rem;
                    height: 0.22rem;
                }
                span{
                    margin-left: 0.23rem;
                }
           }
       }
   }
   .active{
       color: #2A9CFF;
   }
</style>